<template>
    <div v-show="!isDel" class="card">
        <div @click="go" class="h">
            <h1></h1> {{isJK?'报价号':'批号'}}<b>{{batch.cFactorybatchno}}</b> <span v-show="!isJK">{{batch.cMadein}}  {{batch.cType}}</span><span v-show="isJK"> {{batch.TDH?'提单号'+batch.TDH:''}}</span><span class="bz"> {{isJK?batch.BZ:''}}</span></div>
        <ul @click="go" class="cs">
            <li v-show="isJK">
                <h5>年度</h5>
                <b>{{batch.BatchYear}}</b>
            </li>
            <li v-show="isJK">
                <h5>产地</h5>
                <b>{{batch.cMadein}}</b>
            </li>
            <li>
                <h5>等级</h5>
                <b>{{isJK?batch.J_DJ:batch.nColorgd}}</b>
            </li>
            <li>
                <h5>长度</h5>
                <b>{{isJK?batch.J_CD:batch.nAvglength}}</b>
            </li>
            <li>
                <h5>强力</h5>
                <b>{{isJK?batch.J_QL:batch.nAvgintension}}</b>
            </li>
            <li>
                <h5>马值</h5>
                <b>{{isJK?batch.J_MZ1:batch.nAvgmike}}</b>
            </li>
            <li v-show="!isJK">
                <h5>回潮</h5>
                <b>{{batch.nMoisture}}</b>
            </li>
            <li v-show="!isJK">
                <h5>含杂</h5>
                <b>{{!isJK?fix(batch.nTrash,1):'-'}}</b>
            </li>
            <li v-show="!isJK">
                <h5>整齐度</h5>
                <b>{{batch.nAvgrd?batch.nAvgrd:'-'}}</b>
            </li>
        </ul>
        <div  class="ck">
            <div @click="go" class="f4">
                <font class="c999">{{batch.ShipDate?'目的港':'仓库'}}:</font>
                <font>{{batch.ShipDate?batch.DesPort:batch.SellStorage}} {{batch.ShipDate?'船期'+batch.ShipDate:''}}</font>
            </div>
            <div  @click="search(batch.SellEntName)" class="f3">
                <font class="name">
                    <font class="c999" style="width:3em;">卖家：</font>{{batch.SellEntName}}</font>
            </div>
        </div>
        <div class="price">
            <div @click="go" style="flex:2;" class="red" v-show="batch.SellType!='2'">一口价</div>
            <div @click="go" style="flex:2;" class="red trade" v-show="batch.SellType=='2'">
                <div>
                    <span class="fl">{{batch.Contract}}</span>
                    <span class="fr min5">{{batch.TradePrice}}</span>
                </div>
                <div>
                    <span class="fl">基  差</span>
                    <span class="fr min5">{{batch.SellJC}}</span>
                </div>
            </div>
            <div @click="go" style="flex:2;" class="f3">
                <h4>{{batch.SellPrice}}</h4>
                <font :class="{'bold':batch.PriceType && batch.PriceType.indexOf('仓单')>=0}">{{getWeight()}}吨/{{isJK?(batch.BatchType=='3'?'净重':batch.PayType.replace('信用证','').replace('信用證','')):batch.PriceType}}</font>
            </div>
            <div style="flex:3;" class="contact">
                
                <div><i :href="'tel:'+batch.LinkTel" @click="phonecall(batch)" class="iconfont icon-dianhua1"></i>
                    <!-- <h5>电询</h5> -->
                </div>
                <div v-show="!manage"><i :href="'tel:'+batch.LinkTel" @click="addToCart" class="iconfont" :class="{'icon-icon-test iconcolor':batch.isInShopCart,'icon-shoucang':!batch.isInShopCart}"></i>
                    <!-- <h5>收藏</h5> -->
                </div>
                <div><i @click="msg" class="iconfont icon-xiaoxi1" :class="batch.UserID?'':'gray'"></i>
                    <!-- <h5>私信</h5> -->
                </div>
                <!-- <button v-show="!manage" :class="{'active':batch.isInShopCart}" @click="addToCart">{{batch.isInShopCart?'移出购物车':'加入购物车'}}</button> -->
                <div v-show="manage"><i :href="'tel:'+batch.LinkTel" @click="addToCart" class="iconfont icon-shanchu"></i>
                    <!-- <h5>删除</h5> -->
                </div>
            </div>
        </div>
        <img v-show="batch.Status==4" class="img" src="@/assets/gd.png" alt="">
        <img v-show="batch.Status==2"  class="img" src="@/assets/ys.png" alt="">
        <img v-show="batch.Status==5"  class="img" src="@/assets/bl.png" alt="">
    </div>
</template>

<script>
    import {
        Toast,
        Dialog
    } from 'vant';
    import api from '@/api/api'
    export default {
        props: {
            batch: Object,
            manage: Boolean
        },
        data() {
            return {
                isDel: false
            }
        },
        methods: {
            search(batchNo) {
                this.$emit('search', batchNo);
            },
            fix(s, n) {
                if (s) {
                    return parseFloat(s).toFixed(n);
                } else {
                    return '';
                }
            },
            msg() {
                if (!this.batch.UserID) {
                    Toast.fail('该批供应商未注册，请电话联系（可在用户中心注册）');
                    return;
                }
                if (!this.$store.state.userInfo.ID) {
                    Toast.fail('请先登录！');
                    return;
                }
                this.$router.push('/user/msg?FromUserID=' + this.batch.UserID + '&UserID=' + this.$store.state.userInfo.ID)
            },
            phonecall(data) {
                if (!this.$store.state.userInfo.ID) {
                    Toast.fail('请先登录！');
                    return;
                }
                let params = {
                    EntID: this.$store.state.userInfo.EntID,
                    EntName: this.$store.state.userInfo.EntName,
                    UserName: this.$store.state.userInfo.XM?this.$store.state.userInfo.XM:this.$store.state.userInfo.NickName,
                    UserID: this.$store.state.userInfo.ID,
                    OpenID: this.$store.state.userInfo.OpenID,
                    UserTel: this.$store.state.userInfo.phoneno,
                    cFactorybatchno: data.cFactorybatchno,
                    LinkMan: data.LinkMan,
                    LinkTel: data.LinkTel,
                    LinkEntName: data.SellEntName,
                    LinkEntID: data.SellEntID,
                };
                api.addPhoneLog(params);
                window.location.href = 'tel:' + data.LinkTel
            },
            getWeight() {
                // if (this.batch.BatchType == 1 || this.batch.BatchType == 4 || this.batch.BatchType == 5) {
                //     return (this.batch.nGrossweight / 1000).toFixed(2);
                // } else {
                //     return (this.batch.nVehicleweight / 1000).toFixed(2);
                // }
                if(this.batch.PriceType=="毛重")
                {
                    return (this.batch.nGrossweight/1000).toFixed(3);
                }else{
                    return (this.batch.nStdweight).toFixed(3);
                }
                
            },
            go() {
                this.$router.push('/detail/' + this.batch.cFactorybatchno + "?RowID=" + this.batch.RowID)
            },
            addToCart() {
                if (!this.$store.state.userInfo.phoneno) {
                    Toast.fail('请先注册！');
                    return;
                }
                var para = {
                    BatchNo: this.batch.cFactorybatchno,
                    OpenID: this.$store.state.userInfo.OpenID,
                    isInShopCart: this.batch.isInShopCart
                }
                api.addToCard(para).then(res => {
                    if (res.success) {
                        Toast.success(res.msg);
                        this.batch.isInShopCart = !this.batch.isInShopCart;
                    } else {
                        Toast.fail(res.msg);
                    }
                })
            },
            delBatch() {
                Dialog.confirm({
                    title: '提示',
                    message: '确定删除？'
                }).then(() => {
                    var para = {
                        BatchID: this.batch.RowID,
                        OpenID: this.$store.state.userInfo.OpenID
                    }
                    api.delBatch(para).then(res => {
                        if (res.success) {
                            Toast.success(res.msg);
                            this.isDel = true;
                        } else {
                            Toast.fail(res.msg);
                        }
                    })
                }).catch(() => {
                    // on cancel
                });
            }
        },
        computed: {
            isJK: function() {
                return (this.batch.BatchType == 2 || this.batch.BatchType == 3);
            }
        }
    }
</script>

<style scoped lang='less'>
    .card {
        background: #fff;
        margin: 0 0 4px 0;
        padding: 2px 0 0 2px;
        text-align: left;
        font-size: 14px;
        position: relative;
        overflow: hidden;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-left: 3px;
        .bz{
            font-weight: bold;
            color: red;
        }
        .gray{
            background:rgba(45, 186, 186, 0.6) !important;
         }
        .img{
            position: absolute;
            top: 0;
            right: 0;
            width: 50px;
            height: 50px;
            opacity: 0.7;
            transform:rotate(45deg);
        }
        .contact {
            line-height: 1.2em;
            padding-top: 3px;
            i {
                display: inline-block;
                width: 1.5em;
                height: 1.5em;
                line-height: 1.5em;
                color: #fff !important;
                background: #2cb98e;
                border-radius: 5px;
            }
            .iconcolor {
                color: #FFFF66 !important;
            }
            >div {
                display: inline-block;
                padding: 0;
                margin: 0 4px;
            }
            h5 {
                line-height: 1.5em;
                font-size: 12px;
            }
        }
        .price {
            width: 100%;
            display: flex;
            height: 2.5em;
            line-height: 1.8em;
            text-align: center;
            .bold{
                font-weight: bold;
            }
            .min5 {
                min-width: 3em;
            }
            .iconfont {
                font-size: 16px;
                color: #2cb98e;
            }
            .trade {
                line-height: 1em;
                font-size: 0.7rem;  
                padding-top: 0em;
                >div {
                    height: 1.2em;
                    position: relative;
                    >span{
                        margin-top: 0.3em;
                    }                    
                    .fl{
                        position: absolute;
                        left: 2px;
                        top: 0;
                    }
                    .fr{
                        position: absolute;
                        right: 2px;
                        top: 0;
                    }
                }
                >span {
                    display: block;
                    font-size: 14px;
                }
            }
            >div {
                border: 1px solid #f0f0f0;
                border-right: 0;
                padding: 5px 1px;
            }
            >div:last-child {
                border-right: 1px solid #f0f0f0;
            }
            .f3 {
                flex: 3;
                line-height: 1.2em;
                font-size: 12px;
                color: #333;
                >font {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    display: inline-block;
                }
                h4 {
                     
                    color: #ff5500;
                    font-size: 16px;
                }
            }
            button {
                outline: 0;
                border: 0;
                width: 100%;
                background: #2cb98e;
                color: #fff;
            }
            .active {
                background: #f1b619;
            }
        }
        .h {
            padding-left: 10px;
        }
        >div {
            position: relative;
            h1 {
                position: absolute;
                top: 3px;
                left: 0;
                width: 4px;
                height: 1em;
                font-size: 16px;
                background: #2dbaba;
                padding: 0;
                margin: 0;
            }
        }
        .cs {
            margin-top: 0px;
            color: #999;
            display: flex;
            width: 100%;
            font-size: 16px;
            li {
                flex: 1;
                border: 1px solid #f2f2f2;
                text-align: center;
                border-right: 0;
                padding-top: 4px;
            }
            li:last-child {
                border-right: 1px solid #f2f2f2;
            }
            h5 {
                color: #333;
                height: 1em;
                line-height: 1em;
                font-weight: normal;
                margin: 0;
                padding: 0;
            }
            b {
                font-weight: normal;
                font-size: 14px;
                color: #333;
                font-weight: bold;
            }
        }
        .ck {
            display: flex;
            height: 1.5em;
            line-height: 1.5em;
            text-align: center;
            font-size: 12px;
            >div {
                border: 1px solid #f2f2f2;
                border-top: 0;
                border-bottom: 0;
                
            }
            >div:first-child {
                border-right: none;
            }
            >div:last-child {
                border-left: none;
            }
            .f4 {
                flex: 4;
                width: 12em;
                >font {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    max-width: calc(100% - 26em);
                    display: inline-block;
                }
            }
            .f3 {
                flex: 4;
                .name {
                    display: inline-block;
                    max-width: 14em;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap
                }
            }
        }
    }
</style>